<template>
  <div class="short-video-page">
    <router-view ></router-view>
  </div>
</template>

<script>
export default {
  name: "app"
}
</script>

<style scoped lang="scss">
::v-deep {
  .short-video-page {
    background-color: $short_video_main_color;
    min-height: 100vh;
  }
  .with-banner {
    @include withBg("~@/assets/short_vidoe_banner.png", px2rem(739px), px2rem(458px));
    min-height: px2rem(458px);
    padding-top: px2rem(458px);
    width: 100%;
  }



  .title-bar {
    @include withBg("~@/assets/short_video_title.png", px2rem(313px), px2rem(107px), center, center);
    width: px2rem(313px);
    height: px2rem(107px);
    font-size: px2rem(40px);
    color: $short_video_title_color;
    letter-spacing: 0;
    text-align: center;
    box-sizing: border-box;
    padding-top: px2rem(40px);
    margin: 0 auto;
  }





  .requirement-content {
    //margin-top: px2rem(10px);
    padding: 0 px2rem(41px);
    justify-content: space-between;
  }

  .content-title {
    text-align: center;
    font-size: px2rem(30px);
    color: #FB63AC;
  }

  .content-text {
    margin-top: px2rem(14px);
    color: $lightFontColor;
    font-size: px2rem(24px);
    letter-spacing: -1px;
    text-align: justify;
    line-height: px2rem(37px);
  }

  .content-col {
    padding: 0 px2rem(20px)
  }



  .rule {
    margin-top: px2rem(80px);
    @include withBg("~@/assets/short_video_rule_bg.png", px2rem(725px), px2rem(1274px), right, top);
    width: 100%;
    height: px2rem(1274px);
  }

  .rule-tag {
    @include withBg("~@/assets/tag_bg.png", px2rem(121px), px2rem(121px), left, top);
    width: px2rem(121px);
    height: px2rem(121px);
    display: inline-flex;
    justify-content: center;
    align-items: center;
    white-space: nowrap;
    color: $lightFontColor;
    span {
      font-size: px2rem(30px);
    }
    //span {
    //  display: inline-block;
    //  width: px2rem(80px);
    //  height: px2rem(70px);
    //  font-size: px2rem(30px);
    //  color: $lightFontColor;
    //  text-align: justify;
    //  line-height: px2rem(35px);
    //}

  }

  .tag-col {
    color: $lightFontColor;
    display: inline-flex;
    align-items: center;
    flex-direction: column;

    .text-center {
      margin-top: px2rem(10px);
    }
  }



  .award-list {
    margin-top: px2rem(38px);
    padding: 0 px2rem(50px);
    display: flex;
    flex-wrap: wrap;
    .award-item:nth-child(2n) {
      margin-right: 0;
    }
  }

  .award-title {
    margin-top: px2rem(38px);
    margin-left: auto;
    margin-right: auto;
    width: px2rem(246px);
    height: px2rem(68px);
    background-image: linear-gradient(180deg, #FD9CD6 0%, #FB63AC 100%);
    border-radius: px2rem(51.5px);
    text-align: center;
    line-height: px2rem(68px);
    font-size: px2rem(36px);
    color: $lightFontColor;
  }

  .award-item {
    @include withBg("~@/assets/award_item_bg.png", px2rem(300px), px2rem(198px), center, center);
    width: px2rem(300px);
    height: px2rem(198px);
    //float: left;
    //margin-right: px2rem(26px);
    margin-bottom: px2rem(26px);

  }

  .award {
    font-size: px2rem(34px);
    color: $lightFontColor;
    text-align: center;
    padding-top: px2rem(6px);
  }

  .award-description {
    display: flex;
    box-sizing: border-box;
    width: 100%;
    //padding: 0 px2rem(20px);
    height: px2rem(198px - 53px);
    font-size: px2rem(36px);
    color: #FB63AC;
    justify-content: center;
    align-items: center;

    &.award-text-30 {
      font-size: px2rem(30px);
    }

    &.award-text-24 {
      padding: 0 px2rem(10px);
      font-size: px2rem(24px);
      text-align: justify;
    }
  }

  .fix-btn {
    position: fixed;
    display: inline-flex;
    font-size: px2rem(40px);
    align-items: center;
    justify-content: center;
    color: $lightFontColor;
    right: px2rem(25px);
    bottom: px2rem(25px);
    width: px2rem(172px);
    height: px2rem(172px);
    background-image: linear-gradient(193deg, #720CFF 0%, #10006D 94%);
    box-shadow: -8px 2px 44px 0 #7D1EFF;
    border-radius: 50%;
  }

  .with-padding-bottom {
    padding-bottom: px2rem(100px);
  }
  .purple-card {
    background-image: linear-gradient(180deg, #2500A6 0%, #190071 100%);
    border-radius: px2rem(20px);
  }

  .modal-image {
    width: 100%;
    text-align: center;
    margin-top: px2rem(152px);
    margin-right: auto;
    margin-left: auto;
    margin-bottom: px2rem(29px);
  }
  .smile-face {
    width: px2rem(432px);
    height: px2rem(152px);


  }
  .modal-content {
    //font-size: px2rem(36px);
    //color: #F2E630;
    //letter-spacing: 0;
    //text-align: center;
    //width: px2rem(360px);
    //margin: 0 auto;
  }
}


</style>